<template>
  <section class="demo_zs_section">
    <div class="left">
      <div class="nav">
        <div class="nav_optionsjf">
          <!-- v-if="kjfx"  v-if="spjk"  v-if="jdgx"-->
          <!-- <div class="nav_optionjf nav_left" :class="{nav_option_activejf:isActive == 1}" @click="isActive=1">
            <span>空间</span>
          </div>
          <div class="nav_optionjf nav_left" :class="{nav_option_activejf:isActive == 2}" @click="isActive=2">
            <span>监控</span>
          </div>
          <div class="nav_optionjf nav_right" :class="{nav_option_activejf:isActive == 3}" @click="isActive=3">
            <span>机电</span>
          </div> -->
        </div>
      </div>
      <!-- <shudianbiao v-if="isActive==1"></shudianbiao>
        <gudinfeiyon v-if="isActive==2"></gudinfeiyon>
        <feixiang v-if="isActive==3"></feixiang> -->
      <div class="left_panel">
        <div v-if="isActive==1 || isActive==3">
          <div class="formSearch_box">
            <el-form :inline="true" :model="formSearch" class="form_inline" label-width="80px" size="mini">
              <el-form-item label="" size="mini">
                <el-input size="mini" v-model="formSearch.input" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" class="el-icon-search" @click="getTree"></el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="tree_box">
            <el-tree :data="data" :default-checked-keys='defaultcheckedkeys' @check="checkedList" default-expand-all
              :filter-node-method="filterNode" node-key="id" ref="tree" highlight-current :props="defaultProps"
              :expand-on-click-node="false" @node-click="handleNodeClick">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span v-if="data.type == 'system'">

                  <el-button type="text" size="mini" @click="showOrhidden(data)">
                    <i :class="data.show?'el-icon-view':'el-icon-minus'" style="margin-top:8px;font-size:18px;"
                      autocomplete="auto"></i>
                  </el-button>
                </span>
              </span>
            </el-tree>
          </div>

        </div>

        <div v-if="isActive==2">
          <div class="formSearch_box">
            <el-form :inline="true" :model="formSearch" class="form_inline" label-width="80px" size="mini">
              <el-form-item label="" size="mini">
                <el-input size="mini" v-model="formSearch.account" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" class="el-icon-search" @click=""></el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="Status_box">
            <div class="device_status">设备状态</div>
            <div class="device_icon">
              <div>
                <div class="on_line"></div>
                <div class="number_box">56</div>
                <div class="wenzi">在线</div>
              </div>
              <div>
                <div class="off_line"></div>
                <div class="number_box">4</div>
                <div class="wenzi">离线</div>
              </div>
              <div>
                <div class="abnormal"></div>
                <div class="number_box">0</div>
                <div class="wenzi">报警</div>
              </div>
            </div>
          </div>
          <div class="sbc_lable">
            <span>状态列表</span>
          </div>
          <div class="jktable_box table_box">
            <el-table height="100%" :header-cell-style="{
            background: '#03393a',
            color: '#06f5d1',
            border: 'none'
          }" size="mini" :cell-style="tableStyle" :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="设备名称" width="">
              </el-table-column>
              <el-table-column prop="name" label="设备状态" width="">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- <el-checkbox v-model="checked">备选项</el-checkbox> -->
      <div class="check_box">
        <el-checkbox v-model="checked" @change="checkListchange">空间隐藏</el-checkbox>
      </div>
    </div>
    <div class="selection">
      <!-- <div class="check_box">
        <el-checkbox-group v-model="checkList" @change="checkListchange">
          <el-checkbox label="1" value="1">空间分类</el-checkbox>
          <el-checkbox label="2" value="2">视频监控</el-checkbox>
          <el-checkbox label="3" value="3">机电管线</el-checkbox>
        </el-checkbox-group>
      </div> -->
      <!-- <div class="radio_box">
        <el-radio-group v-model="radio">
          <el-radio :label="1">供电</el-radio>
          <el-radio :label="2">空调</el-radio>
          <el-radio :label="3">门禁</el-radio>
        </el-radio-group>
      </div> -->
    </div>

    <div class="right_panel">
      <div class="top_img">数据统计</div>
      <div class="content">
        <div class="sbc_lable">
          <span>设备层</span>
        </div>
        <div class="shebeiceng">
          <div id="liquidfill-chart1" class="liquidfill-chart"></div>
          <div id="liquidfill-chart2" class="liquidfill-chart"></div>
          <div id="liquidfill-chart3" class="liquidfill-chart"></div>
        </div>
        <div class="font_boxs">
          <div class="font_box">温度</div>
          <div class="font_box">湿度</div>
          <div class="font_box">PM2.5</div>
        </div>
        <div class="sbc_lable">
          <span>设备层</span>
        </div>
        <div class="shebeibt" id="shebeibt"></div>
        <div class="sbc_lable">
          <span>设备列表</span>
        </div>
        <div class="dctable_box table_box">
          <el-table height="100%" :header-cell-style="{
          background: '#03393a',
          color: '#06f5d1',
          border: 'none'
        }" size="mini" :cell-style="tableStyle" :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="设备名称" width="">
            </el-table-column>
            <el-table-column prop="name" label="设备数量" width="">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>


    <el-dialog class="tanchuang" :title="devicedata.deviceName" center :visible.sync="dialogVisible" :modal=false
      width="50%">
      <!-- :before-close="handleClose" -->
      <el-tabs class="tabsbox" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="设备监控" name="first">
          <propertyInfo :devicedata="devicedata"></propertyInfo>
        </el-tab-pane>
        <el-tab-pane label="维修记录" name="second">
          <deviceInfo :devicedata="devicedata"></deviceInfo>
        </el-tab-pane>
        <el-tab-pane label="运维记录" name="third">
          <maintainInfo @handleCurrentPage="handleCurrentPage" :maintainData="devicedatathird" :total="total">
          </maintainInfo>
        </el-tab-pane>
        <el-tab-pane label="报警记录" name="fourthly">
          <alarmInfo @handleCurrentPage="handleCurrentPage" :devicedata="devicedatafourthly" :total="total"></alarmInfo>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>


  </section>
</template>

<script>
  import * as echarts from 'echarts';
  import 'echarts-liquidfill';
  import { getDateArray } from '../../util/util'
  import { commandread,jfDeviceList, getBindDeviceinfo, eventDevice, getDevicePlanDetails } from '../../url/api';
  import propertyInfo from '../jf_modules/property_info.vue';
  import deviceInfo from '../jf_modules/device_info.vue';
  import maintainInfo from '../jf_modules/maintain_info.vue';
  import alarmInfo from '../jf_modules/alarm_info.vue';
  export default {
    data() {
      return {
        total: 0,
        thirdSearch: {
          current: 1,
          size: 10,
        },
        fourthlySearch: {
          page: {
            current: 1,
            size: 10,
          },
        },

        devicedatafourthly: {},
        devicedatathird: {},
        checked: '',
        maintainData: {},//保养记录
        devicedata: {},
        activeName: 'first',
        dialogVisible: false,
        kjfx: false,
        spjk: false,
        jdgx: false,
        formSearch: {},
        checkIdList: '',
        checkedData: [1, 2, 3, 4, 5, 6],
        defaultcheckedkeys: [1, 2, 3, 4, 5, 6],
        ReadData: '',
        data: [{
          id: 'iot_acs',
          label: '门禁系统',
          children: [],
          type: 'system',
          show: true,
        }, {
          id: 'iot_cahs',
          label: '冷源系统',
          children: [],
          type: 'system',
          show: true,
        }, {
          id: 'iot_vscs',
          label: '视频监控系统',
          children: [],
          type: 'system',
          show: true,
        }],
        tableData: [{
          date: '冷却塔',
          name: '25',
        }, {
          date: '冷冻水二次泵',
          name: '6',
        }, {
          date: '冷冻水二次泵',
          name: '6',
        }, {
          date: '冷冻水二次泵',
          name: '6',
        }, {
          date: '冷冻水二次泵',
          name: '6',
        }, {
          date: '冷冻水二次泵',
          name: '6',
        }, {
          date: '冷冻水二次泵',
          name: '6',
        },],
        tabPosition: '',
        isActive: 1,
        checkList: [],
        radio: '',
        yuandata: 30,
        option1: {

          series: [{
            type: 'liquidFill',
            radius: '56px', // 半径大小
            data: [{ value: 23 }, 0.3],
            // data: [0.5],
            center: ['50%', '50%'], // 布局位置
            color: ['transparent', '#00c1a4', '#00c1a4'],
            label: {
              formatter: '{c} ℃',
              // formatter: '{c}mg',
              color: '#fff',
              fontSize: 14,
            },
            outline: {
              show: true,
              borderDistance: 0,
              itemStyle: {
                borderColor: '#00c1a4',
                borderWidth: 2
              }
            },
            backgroundStyle: {
              color: 'transparent' //背景颜色
            },
          }]
        },
        option2: {
          series: [{
            type: 'liquidFill',
            radius: '56px', // 半径大小
            data: [0.5],
            // data: [0.5],
            center: ['50%', '50%'], // 布局位置
            // color: ['#c5c5c5', 'rgb(0, 0, 255)', 'rgb(0, 0, 255)'],
            label: {
              // formatter: '{c} ℃',
              // formatter: '{c}mg',
              // color: '#fff',
              // fontSize: 14,
              // insideColor: 'transparent',
              normal: {
                color: '#fff',
                insideColor: 'transparent',
                textStyle: {
                  fontSize: 14,
                  // fontWeight: 'bold',
                }
              }
            },
            color: [{
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [{
                offset: 1,
                color: ['#00c1a4'], // 0% 处的颜色
              }, {
                offset: 0,
                color: ['#00c1a4'], // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }],
            outline: {
              show: true,
              borderDistance: 0,
              itemStyle: {
                borderColor: '#00c1a4',
                borderWidth: 2
              }
            },
            backgroundStyle: {
              color: 'transparent' //背景颜色
            },
          }]
        },
        option3: {
          series: [{
            type: 'liquidFill',
            radius: '56px', // 半径大小
            data: [{ value: 70 }, 0.7],
            // data: [0.5],
            center: ['50%', '50%'], // 布局位置
            color: ['transparent', '#00c1a4', '#00c1a4'],
            label: {
              // formatter: '{c} ℃',
              formatter: '{c}mg',
              color: '#fff',
              fontSize: 14,
            },
            outline: {
              show: true,
              borderDistance: 0,
              itemStyle: {
                borderColor: '#00c1a4',
                borderWidth: 2
              }
            },
            backgroundStyle: {
              color: 'transparent' //背景颜色
            },
          }]
        },
        option4: {
          legend: {
            show: false,
            align: 'left',
            orient: 'vertical',
            left: 'right',
            top: '18%',
            itemHeight: this.transformFontSize(12),
            itemWidth: this.transformFontSize(12),
            itemGap: this.transformFontSize(16),
            textStyle: {
              color: '#17F8FD',
              fontSize: this.transformFontSize(12)
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}:{c} ({d}%)'
          },
          color: ['#00ce96', '#ff5476', '#4dbaff', '#d296ce'],
          series: [
            {
              name: '详情：',
              type: 'pie',
              // selectedMode: '',
              radius: ['60%', '75%'],
              center: ['50%', '50%'],
              label: {
                // position: 'top',
                formatter: '{b|{b}}:{c} ({d}%) ',
                fontSize: this.transformFontSize(12),
                color: '#ddd',
                rich: {
                  a: {
                    color: '#fff',
                    lineHeight: 22,
                    align: 'center'
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 33
                  },
                }
              },
              // labelLine: {
              //   // position:'top',
              //   length: this.transformFontSize(5),
              //   length2: 0,
              //   show:false,
              // },
              data: [
                { value: 240, name: '制冷设机房', },
                { value: 260, name: '低电配电室' },
                { value: 250, name: '主机控制室' },
                { value: 250, name: '其他' },
              ],
            },

          ],
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '0%',
            // containLabel: true,
            // show: false // 网格边框是否显示，上和右边框 
          },
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    watch: {
      "$store.state.moduleData"(val) {
        if (val.status) {
          // getList
          console.log("AAAAAAAAAAAAAAAAAAA", val);
          this.$store.commit('changeModuleData', { id: null, status: false })
        }
      }
    },

    methods: {
      handleCurrentPage(val) {
        console.log("XXXXXXXXXXXXXXXXXXXXX", val);
        if (this.activeName == 'fourthly') {
          this.fourthlySearch.page.current = val;
          this.getEventDevice();
        } else if (this.activeName == 'third') {
          this.thirdSearch.current = val;
          this.getDevicePlanDetails();
        }
      },
      getTree() {
        this.$refs.tree.filter(this.formSearch.input);
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      handleClick(tab, event) {
        // 
        console.log(tab, event);
        if (this.ReadData.subsystem == "iot_acs") {
          console.log("门禁系统");
        } else if (this.ReadData.subsystem == "iot_vscs") {
          console.log("监控系统");
        } else if (this.ReadData.subsystem == "iot_ips") {//报警系统
          console.log("报警系统");
          console.log(this.devicedata, "AAAAAAAAAAA");
        } else {
          if (tab.name != 'first') {
            if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
              clearInterval(this.timer); //关闭
              console.log("2先关闭定时器");
            }
          } else {
            if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
              clearInterval(this.timer); //关闭
              console.log("1关闭原有定时器");
            }
            this.timer = window.setInterval(() => {
              setTimeout(() => {
                this.ReadCommand(this.ReadData);
              }, 0);
            }, 4000)
          }
        }
        // 
        if (tab.name == 'fourthly') {
          this.getEventDevice();
        } else if (tab.name == 'third') {
          this.getDevicePlanDetails();
        }

      },
      getDevicePlanDetails() {
        
        let params = {
          deviceId: this.ReadData.deviceId,
          current: this.thirdSearch.current,
          size: this.thirdSearch.size,
        }
        getDevicePlanDetails(params).then(res => {
          console.log(res);
          if (res.data.ok) {
            this.devicedatathird = res.data.data.records.filter(item => {
              if (item.patrolTimeDTOS) {
                item.stime = getDateArray(item.patrolTimeDTOS[0].executionStartTime)[9]
                item.etime = getDateArray(item.patrolTimeDTOS[0].executionEndTime)[9]
                item.timeout = item.patrolTimeDTOS[0].timeout
              }
              if (item.inspectorsName) {
                let ryarry = []

                item.inspectorsName.forEach(val => {
                  ryarry.push(val.name)
                  item.ryids = val.id
                })
                if (ryarry.length > 2) {
                  item.ywrydata = ryarry.join('、')
                  item.yunweirenyuan = ryarry[0] + '、' + ryarry[1] + ' . . .'

                } else {
                  item.yunweirenyuan = ryarry.join('、')
                  item.ywrydata = ryarry.join('、')
                }

                //item.yunweirenyuan = item.inspectorsName.name.join(',')
              }
              return item;
            });
            this.total = res.data.data.total;
          } else {
            this.$message(res.data.message);
          }
        })

      },
      getEventDevice() {
         
        console.log(this.ReadData, "AAAAAAAAAAA11");
        let params = {
          deviceId: this.ReadData.deviceId,
          subsystemCode: this.ReadData.subsystem,
          page:this.fourthlySearch.page
        }
        eventDevice(params).then(res => {
          console.log(res);
          if (res.data.ok) {
            this.devicedatafourthly = res.data.data.records.filter(item => {
              if (item.createTime) {
                item.createTime = this.$root.getDateArray(item.createTime)[9];
              }
              return item;
            });
            this.total = res.data.data.total;
          } else {
            this.$message(res.data.message);
          }
        });
      },
      showOrhidden(data) {//系统显示隐藏
        console.log(data);
        let list = data.children
        if (data.show) {
          data.show = false
          for (let index = 0; index < list.length; index++) {
            let modelId = list[index].modelId
            window.jfs["mesh_" + modelId] ? window.jfs["mesh_" + modelId].visible = false : null;

          }

          // if (data.id == 'iot_ba_hvac') {//空调系统
          //   window.jfs.mesh_1.visible = false
          // }
          // if (data.id == 'iot_vscs') {//监控系统
          //   window.jfs.mesh_2.visible = false
          // }
        } else {
          data.show = true
          for (let index = 0; index < list.length; index++) {
            let modelId = list[index].modelId
            window.jfs["mesh_" + modelId] ? window.jfs["mesh_" + modelId].visible = true : null;

          }
          // if (data.id == 'iot_ba_hvac') {//空调系统
          //   window.jfs.mesh_1.visible = true
          // }
          // if (data.id == 'iot_vscs') {//监控系统
          //   window.jfs.mesh_2.visible = true
          // }
        }

        console.log(data, "QQQQQQQQQQQQQQQQQQ");

      },
      handleNodeClick(data) {//弹框
        console.log(data, "点击设备列表");
        if (data.type == 'device') {
          
          let devicesss = {
            deviceName: "设备",
            devicePoints: [{
              pointName: '开关',
              valueType: 'bool'
            }, {
              pointName: '温度',
              valueType: 'str'
            }, {
              pointName: '报警控制开关',
              valueType: 'bool'
            }, {
              pointName: '左右',
              valueType: 'bool'
            }, {
              pointName: '湿度',
              valueType: 'str'
            }],
            photoUrl: require('../../assets/images/228.jpg'),
            deviceId:data.deviceId,
          }
          //根据设备id查设备点位,读数据等
          let params = {
            deviceId: data.deviceId
          }
          getBindDeviceinfo(params).then((res) => {//
            console.log(res, "设备结构")
            if (res.data.ok) {
              
              if (res.data.data) {
                this.devicedata = res.data.data
                this.ReadData = res.data.data;
                console.log(this.ReadData, "读数据");
              let timedtask = true;//默认打开详情开始定时读数据任务，部分系统不需要（监控系统，门禁系统）
              if (this.devicedata.subsystem == "iot_vscs") {//视频监控系统
                this.videoplayingstatus = true;
                timedtask = false
              } else if (this.devicedata.subsystem == "iot_acs") {//门禁系统
                timedtask = false
              } else if (this.devicedata.subsystem == "iot_ips") {//报警系统
                timedtask = false
              } else {
                this.ReadCommand(this.devicedata);
              }
              if (this.activeName == "first" && timedtask == true) {
                this.timer = window.setInterval(() => {
                  setTimeout(() => {
                    this.ReadCommand(this.ReadData)
                  }, 0);
                }, 4000)
              }
              } else {
                this.devicedata = devicesss
                this.ReadData = devicesss;
              }
            } else {
              this.devicedata = devicesss
              this.ReadData = devicesss;
            }
          })
          this.dialogVisible = true
        }
        console.log(data, "AAAAAAAAA");
      },
      ReadCommand(data) {
        // new Promise((resolve, reject) => {
        if (data) {
          let params = [data];
          commandread(params).then((res) => {
            if (res.data.ok) {
              this.devicedata = res.data.data[0]
              // console.log("QQQQQQQQ",this.devicedata,"实时更新点位数据");
            }
          });
        }
      },
      checkedList() {
        this.$nextTick(() => {
          let res = this.$refs.tree.getCheckedNodes(true)
          let ids = []
          this.checkedData = []
          res.forEach(item => {
            this.checkedData.push(item.id)
          })
          window.jfs.mesh_1.visible = false;
          window.jfs.mesh_2.visible = false;
          window.jfs.mesh_3.visible = false;
          window.jfs.mesh_4.visible = false;
          window.jfs.mesh_5.visible = false;
          window.jfs.mesh_6.visible = false;

          this.checkedData.forEach(item => {
            if (item == 1) {//空调水系统
              window.jfs.mesh_1.visible = true
            }
            if (item == 2) {//送排风系统
              window.jfs.mesh_2.visible = true
            }
            if (item == 3) {//給水系统
              window.jfs.mesh_3.visible = true
            }
            if (item == 4) {//排水系统
              window.jfs.mesh_4.visible = true
            }
            if (item == 5) {//喷淋系统
              window.jfs.mesh_5.visible = true
            }
            if (item == 6) {//消防系统
              window.jfs.mesh_6.visible = true
            }

          });
          // if (ids.length == 0) {
          //   window.jfs.mesh_1.visible = true
          // }
        });
      },
      checkListchange(val) {
        console.log(val);
        if (val) {
          window.jfs["mesh_" + 42] ? window.jfs["mesh_" + 42].visible = false : null;
        } else {
          window.jfs["mesh_" + 42] ? window.jfs["mesh_" + 42].visible = true : null;
        }
        // this.kjfx = false
        // this.spjk = false
        // this.jdgx = false
        // console.log(this.checkList);
        // this.checkList.forEach(val => {
        //   // 
        //   if (val == "1") {
        //     this.kjfx = true
        //   }
        //   if (val == "2") {
        //     this.spjk = true
        //   }
        //   if (val == "3") {
        //     this.jdgx = true
        //   }
        // });
        // console.log(this.kjfx, this.spjk, this.jdgx);

      },
      tableStyle({ row, column, rowIndex, columnIndex }) {
        //console.log("行数：",rowIndex);
        if ((columnIndex * 1 + 1) % 2 == 0) {
          return "background: transparent;color:#c5c7c7;border-bottom: 1px solid;border-image: -webkit-linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #06ffd9 0%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;border-image: -moz-linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #06ffd9 0%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;border-image: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #06ffd9 0%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;";

        } else {
          return "background: transparent;color:#c5c7c7;border-bottom: 1px solid;border-image: -webkit-linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #06ffd9 100%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;border-image: -moz-linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #06ffd9 100%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;border-image: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #06ffd9 100%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;";
        }
      },
      getdata() {
        let chart1 = echarts.init(document.getElementById('liquidfill-chart1'));
        let chart2 = echarts.init(document.getElementById('liquidfill-chart2'));
        let chart3 = echarts.init(document.getElementById('liquidfill-chart3'));
        chart1.setOption(this.option1);
        chart2.setOption(this.option2);
        chart3.setOption(this.option3);
      },
      drawEcharts2() {
        let myChart = echarts.init(document.getElementById('shebeibt'))
        myChart.setOption(this.option4);
      },
      transformFontSize(fontsize) {
        // 获取屏幕宽度
        const width = window.screen.width
        // console.log(width, "屏幕宽度");
        const ratio = width / 1920
        // console.log(ratio, "屏幕比率");
        // 取下整
        return parseInt(fontsize * ratio)
      },
      getJfDeviceList() {
        //iot_ba_hvac//暖通空调
        jfDeviceList().then((res) => {//
          console.log(res, "机房设备")
          if (res.data.ok) {
            let jfDeviceList = res.data.data
            console.log(jfDeviceList);
            for (let index = 0; index < this.data.length; index++) {
              let list = this.data[index];
              jfDeviceList.forEach(val => {
                if (val.subsystemCode == list.id) {
                  let device = {
                    id: val.id,
                    label: val.deviceName,
                    modelId: val.modelId,
                    deviceId: val.deviceId,
                    type: 'device',
                  }
                  this.data[index].children.push(device);
                }
              })
            }
            console.log(this.data, "设备封装数据");
            // this.tableData = res.data.data.records;
            //console.log(res.data.data);
            // this.total = res.data.data.total * 1
          }
        })

      }
    },

    mounted() {
      this.getdata()
      this.drawEcharts2();
      this.checkListchange();
      this.getJfDeviceList();
    },
    components: {
      propertyInfo,
      deviceInfo,
      maintainInfo,
      alarmInfo
    }
  }
</script>

<style scoped>
  .shebeibt {
    width: 100%;
    height: 150px;
  }

  .content {
    padding: 0 10px;
  }

  .sbc_lable {
    font-size: 16px;
    font-weight: 800;
    color: #06ffd9;
    font-style: italic;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid;
    border-image: -webkit-linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #06ffd9 50%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;
    border-image: -moz-linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #06ffd9 50%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;
    border-image: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #06ffd9 50%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;

  }

  .sbc_lable span {
    line-height: 60px
  }

  .shebeiceng {
    display: flex;
  }

  .top_img {
    text-align: center;
    color: #06ffd9;
    font-size: 18px;
    font-weight: 800;
    font-style: italic;
    line-height: 40px;
    width: 100%;
    height: 50px;
    background: url(../../assets/images/jifang_panel/zibian.png) no-repeat;
    background-size: 100% 50px;
  }

  .font_boxs {
    color: #e9e9ea;
    display: flex;
  }

  .font_box {
    width: 105px;
    height: auto;
    text-align: center;
  }

  .liquidfill-chart {
    width: 105px;
    height: 80px;
  }

  .top_radio_group {
    width: 300px;
    height: 50px;
  }

  .left {
    position: absolute;
    top: 50%;
    left: 10px;
    z-index: 100;
    transform: translateY(-53%);
  }

  .left_panel {
    /* position: absolute;
    top: 50%;
    left: 10px; */
    z-index: 100;
    width: 325px;
    height: 717px;
    padding: 0 20px;
    box-sizing: border-box;
    /* padding-left: 10px; */
    /* transform: translateY(-50%); */
    background: url(../../assets/images/jifang_panel/left_panel.png) no-repeat;
    background-size: 325px 717px;
    /* padding-top: 20px; */
  }

  .right_panel {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 100;
    width: 355px;
    height: 800px;
    padding: 0 20px;
    box-sizing: border-box;
    transform: translateY(-50%);
    background: url(../../assets/images/jifang_panel/right_panel.png) no-repeat;
    background-size: 355px 800px;
  }

  .nav {
    width: 100%;
    /* text-align: center; */
  }

  .nav_optionsjf {
    /* height: 30px; */
    width: 216px;
    /* border: 1px solid #03816f; */
    color: #FFF;
    /* box-sizing: border-box; */
    position: relative;
    display: flex;
    margin: 0px auto;
    margin-bottom: 10px;
  }

  .nav_optionjf {
    height: 30px;
    line-height: 30px;
    font-weight: 800;
    font-style: italic;
    border: 1px solid #03816f;
    width: 70px;
    text-align: center;
    cursor: pointer;
  }


  .nav_optionjf span {
    font-size: 16px;
  }

  .nav_option_activejf {
    background: url(../../assets/images/jifang_panel/pitch_on.png) no-repeat;
    background-size: 70px 30px;
    color: #ffffff;
  }

  .check_box {
    margin-top: 10px
  }

  .check_box>>>.el-checkbox {
    color: #e9e9e9 !important;
  }

  .radio_box>>>.el-radio {
    color: #e9e9e9 !important;
  }

  /* 选中后的字体颜色 */
  .radio_box>>>.el-radio__input.is-checked+.el-radio__label {
    color: #e9e9e9 !important;
  }

  /* 选中后小圆点的颜色 */
  .radio_box>>>.el-radio__input.is-checked .el-radio__inner {
    /* background: #e9e9e9 !important; */
    border-color: #e9e9e9 !important;
  }

  .check_box>>>.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #e9e9e9;
  }


  .check_box>>>.el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: transparent;
    border-color: #e9e9e9;

  }

  .check_box>>>.el-checkbox__inner {
    background-color: transparent;
  }

  .check_box>>>.el-checkbox__label {
    font-size: 16px;
  }

  .radio_box {
    margin-left: 60px;
  }

  .radio_box>>>.el-radio__inner {
    background-color: transparent;
  }

  .radio_box>>>.el-radio__label {
    font-size: 16px;
  }

  .selection {
    position: absolute;
    bottom: 80px;
    left: 100px;
    z-index: 100;
    transform: translateY(-50%);
    display: flex;
    font-weight: 800;
    color: #e9e9e9;
  }

  /* 表格 */
  .jktable_box {
    width: 100%;
    height: 430px;
    margin-top: 20px;
    /* margin: auto; */
  }

  .dctable_box {
    width: 100%;
    height: 300px;
    margin-top: 20px;
    /* margin: auto; */
  }

  .table_box /deep/ .el-table--fit {
    /* padding: 20px 0; */
  }

  .table_box /deep/ .el-table,
  .el-table__expanded-cell {
    background-color: transparent;

  }

  .table_box /deep/ .el-table tr {
    background-color: transparent !important;
  }

  .table_box /deep/ .el-table--enable-row-transition .el-table__body td,
  .el-table .cell {
    background-color: transparent;
  }

  .tree_box {
    height: 620px;
    overflow: auto;
  }

  .tree_box /deep/ .el-tree {
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0);

  }

  .tree_box /deep/ .el-checkbox__inner {
    background: rgba(0, 0, 0, 0);
  }

  .tree_box /deep/ .el-tree-node__content:hover {
    background: rgba(104, 147, 215, 0.1);
  }

  .tree_box /deep/ .el-tree-node:focus>.el-tree-node__content {
    background-color: rgba(97, 161, 158, 0.1);
  }

  .tree_box /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: transparent;
  }

  .formSearch_box /deep/ .el-input__inner {
    /* height: 47px; */
    color: #fff;
    background-color: rgba(255, 255, 255, 0);
  }

  .formSearch_box /deep/ .el-button {
    background: transparent;
    color: #08e3c3;
    /* font-size: 17px; */
  }

  .formSearch_box /deep/.el-button--mini,
  .el-button--mini.is-round {
    padding: 5px 10px;
  }

  .formSearch_box /deep/.el-button--mini {
    padding: 5px 10px;
  }

  .formSearch_box {
    text-align: center;
  }

  /* 
  滚动条样式
 */
  ::-webkit-scrollbar {
    width: 3px;
  }

  /* 滚动条滑块 */
  /* 
 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #06ffd9;
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.1);
  }

  /* 内层滚动槽 */
  /* 
 */
  ::-webkit-scrollbar-track-piece {
    width: 2px;
    background: rgba(126, 126, 126, 0.4);
  }

  .device_status {
    font-size: 16px;
    font-weight: 800;
    font-style: italic;
    color: #06ffd9;
  }

  .device_icon {
    display: flex;
    justify-content: space-around;
    color: #06ffd9;
    font-size: 15px;
    margin-top: 10px;
  }

  .on_line {
    width: 32px;
    height: 32px;
    background: url(../../assets/images/jifang_panel/y.png) no-repeat;
    background-size: 32px 32px;
  }

  .off_line {
    width: 32px;
    height: 32px;
    background: url(../../assets/images/jifang_panel/n.png) no-repeat;
    background-size: 32px 32px;
  }

  .abnormal {
    width: 32px;
    height: 32px;
    background: url(../../assets/images/jifang_panel/bj.png) no-repeat;
    background-size: 32px 32px;
  }

  .number_box {
    text-align: center;
    margin: 10px 0;
  }

  .wenzi {
    text-align: center;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .tanchuang /deep/ .el-dialog {
    background: url(../../assets/images/jifang_panel/tanchuang.png) no-repeat;
    background-size: 100% 100%;
    color: #ffffff;
    /* min-height: 50%; */
    height: auto;
  }

  .tanchuang /deep/ .el-dialog__title {
    color: #ffffff;
  }

  .tanchuang /deep/ .el-dialog__body {
    padding: 0px 20px 10px 20px;
    color: #ffffff;
  }

  .tabsbox {
    width: 100%;
  }

  .tabsbox /deep/ .el-tabs__item {
    color: #ffffff;
  }

  .tabsbox /deep/ .is-active {
    color: #409EFF;
  }

  .tabsbox /deep/ .el-tabs__active-bar {
    display: none;
  }

  .tabsbox /deep/ .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-pagination .btn-next, .el-pagination .btn-prev {
    /* background: center center no-repeat #d6daed; */
    background-size: 0.083333rem;
    cursor: pointer;
    margin: 0;
    color: #eee;
}
</style>